{{set . "title" .template.Title}}

<!-- 面包屑导航 - 科技风格 -->
<div class="text-sm text-gray-400 mb-6 font-rajdhani">
    <a href="/" class="hover:text-cyber-blue transition-colors">首页</a> &gt; 
    <a href="/templates" class="hover:text-cyber-blue transition-colors">模板</a> &gt; 
    <span class="text-cyber-blue">{{.template.Title}}</span>
</div>

<!-- 主要内容 -->
<div class="bg-cyber-dark bg-opacity-70 backdrop-blur-sm rounded-lg border border-gray-700 overflow-hidden">
    <!-- 图片画廊 - 科技风格 -->
    <div class="relative flex flex-col items-center">
        <!-- 主图 -->
        {{if gt (len .template.Images) 0}}
        <img id="mainImage" src="{{index .template.Images 0}}" class="max-w-full object-cover" alt="{{.template.Title}}">
        {{end}}
        
        <!-- 缩略图选择器 -->
        {{if gt (len .template.Images) 1}}
        <div class="flex overflow-x-auto p-4 gap-2 bg-cyber-dark bg-opacity-90">
            {{range $index, $image := .template.Images}}
            <img src="{{$image}}" 
                 onclick="document.getElementById('mainImage').src='{{$image}}'; document.querySelectorAll('.thumbnail').forEach(img => img.classList.remove('ring-2', 'ring-cyber-blue')); this.classList.add('ring-2', 'ring-cyber-blue');" 
                 class="h-24 w-24 object-contain cursor-pointer rounded-sm thumbnail {{if eq $index 0}}ring-2 ring-cyber-blue{{end}}" 
                 alt="图片 {{$index}}">
            {{end}}
        </div>
        {{end}}
    </div>
    
    <!-- 内容信息 -->
    <div class="p-6 space-y-6">
        <h1 class="text-2xl font-orbitron text-white">{{.template.Title}}</h1>
        
        <!-- 基本信息 - 科技风格 -->
        <div class="flex flex-wrap gap-4 text-sm text-gray-300 font-rajdhani">
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-cyber-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                更新: {{.template.Updated}}
            </div>
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-cyber-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
                </svg>
                大小: {{.template.FileSize}}
            </div>
            <div class="flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-cyber-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                </svg>
                分类: <a href="/templates?category={{.template.FenLei.Id}}" class="ml-1 text-cyber-blue hover:text-white transition-colors">{{.template.FenLei.Title}}</a>
            </div>
        </div>
        
        <!-- 科技风格分隔线 -->
        <div class="h-px bg-gradient-to-r from-transparent via-cyber-blue to-transparent opacity-30"></div>
        
        <!-- 描述 -->
        <div>
            <h2 class="text-lg font-orbitron mb-3 text-cyber-blue">描述</h2>
            <p class="text-gray-300 leading-relaxed font-rajdhani">{{.template.Desc}}</p>
        </div>
        
        <!-- 预览链接 -->
        {{if .template.Preview}}
        <div>
            <h2 class="text-lg font-orbitron mb-3 text-cyber-blue">预览</h2>
            <a href="{{.template.Preview}}" target="_blank" class="inline-flex items-center text-cyber-blue hover:text-white transition-colors font-rajdhani">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                </svg>
                在线预览
            </a>
        </div>
        {{end}}
        
        <!-- 标签 - 科技风格 -->
        {{if .template.Tags}}
        <div>
            <h2 class="text-lg font-orbitron mb-3 text-cyber-blue">标签</h2>
            <div class="flex flex-wrap gap-2">
                {{range $tag := .template.Tags}}
                <a href="/templates?tag={{$tag.Id}}" class="px-3 py-1 bg-cyber-dark bg-opacity-50 border border-cyber-purple border-opacity-30 text-gray-300 text-sm rounded-full hover:border-cyber-purple hover:text-cyber-purple transition-all duration-300 font-rajdhani">
                    {{$tag.Title}}
                </a>
                {{end}}
            </div>
        </div>
        {{end}}
        
        <!-- 下载区 -->
        <div>
            <h2 class="text-lg font-orbitron mb-3 text-cyber-blue">下载</h2>
            
            {{if .template.Download}}
            <div class="space-y-2">
                {{range $index, $download := .template.Download}}
                <a href="{{$download.Url}}" class="inline-block px-4 py-2 border border-cyber-blue text-cyber-blue rounded hover:bg-cyber-blue hover:bg-opacity-10 transition-all hover-glow font-rajdhani mr-2">
                    {{$download.Title}}
                </a>
                {{end}}
            </div>
            {{else}}
            <p class="text-gray-400 font-rajdhani">暂无下载链接</p>
            {{end}}
        </div>
    </div>
</div>

<!-- 相关推荐 -->
{{if .relatedTemplates}}
<div class="mt-12">
    <div class="text-center mb-8 relative">
        <h2 class="text-xl font-orbitron text-white mb-2 inline-block relative">
            <span class="relative z-10">相关模板</span>
            <span class="absolute bottom-0 left-0 h-1 w-full bg-cyber-blue"></span>
        </h2>
        <div class="w-12 h-1 bg-cyber-blue mx-auto mt-2"></div>
    </div>
    
    <div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
        {{range $template := .relatedTemplates}}
        <a href="/templates/{{$template.Id}}" class="bg-cyber-dark bg-opacity-80 rounded-lg border border-gray-700 transition-all hover:border-cyber-blue hover:shadow-neon-blue group block no-underline overflow-hidden">
            <div class="relative overflow-hidden">
                <img src="{{$template.Thumb}}" class="w-full aspect-[3/4] object-cover rounded-t-lg transform group-hover:scale-105 transition-transform duration-500" alt="{{$template.Title}}">
                <div class="absolute inset-0 bg-gradient-to-t from-cyber-dark to-transparent opacity-50"></div>
                <div class="absolute inset-0 bg-cyber-blue opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
            </div>
            <div class="p-3">
                <h3 class="text-white text-base font-rajdhani font-medium line-clamp-1 group-hover:text-cyber-blue transition-colors">{{$template.Title}}</h3>
            </div>
        </a>
        {{end}}
    </div>
</div>
{{end}}